<template>
  <div id="container">
    <div class="title">
      <img src="../image/table-title.png" >
      <img class="dot" src="../image/table-dot.png" >
      <span>{{ title }}</span>
      <div class="more" @click="_moreClick">
        查看更多
        <img src="./image/right-angle.png">
      </div>
    </div>
    <a-table class="table" :columns="columns" :data-source="listData" :locale="tableLocale" :pagination="false">
      
    </a-table>
    <a-icon class="loading" width="4em" height="4em" type="loading" v-if="loading"/>
    <div class="more-bg" v-if="showMore">
      <div class="more-table">
        <div class="title">
          预警数据
          <!-- <img src="./image/line.png"> -->
          <img src="./image/close.png" class="close" @click="showMore = false">
        </div>
        <div class="total">
          当日预警数量<span>共<i> {{moreData.total}} </i>条</span>
        </div>
        <a-table class="table" :columns="moreColumns" :data-source="moreData.records" :locale="tableLocale"
          :pagination="paginationOption" :total="moreData.total" @change="moreChange">
        </a-table>
        <a-icon class="more-loading" type="loading"  v-if="moreLoading" />
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import empty from './components/empty.vue'
  import autoSize from '../../uitils/auto-font-size.js'
  export default {
    components: {
      empty
    },
    name: 'chart-pie',
    props: {
      title: String,
      shadow: {
        type: Boolean,
        default: true
      },
      data: {
        type: Array,
        default: () => {
          return []
        }
      },
      moreData: {
        type: Object,
        default: () => {
          return {
            records: [],
            total: 0
          }
        }
      },
      loading: {
        type: Boolean,
        default: false
      },
      moreLoading: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      paginationOption: function() {
        return {
          position: 'bottom',
          size: 'small',
          total: this.moreData.total,
          pageSize: 6,
          showTotal: total => {
            return `共${total}条记录`
          }
        }
      },
      id: function() {
        return `main-${Math.random()}`
      },
      listData: function() {
        return this.data.filter((item, index) => {
          return index < 3
        })
      }
    },
    data() {
      return {
        tableLocale: {
          emptyText: < empty / >
        },
        showMore: false,

        moreColumns: [{
            title: '受害人手机号',
            dataIndex: 'victimPhone',
            align: 'center',
            width: 160
          },
          {
            title: '预警等级',
            dataIndex: 'warningLevel',
            align: 'center',
            width: 100
          },
          {
            title: '诈骗类型',
            dataIndex: 'fraudType',
            align: 'center',
            width: 120
          },
          {
            title: '预警时间',
            width: 120,
            dataIndex: 'warningTime',
            align: 'center'
          },
          {
            title: '涉诈域名',
            dataIndex: 'accessDomainName',
          },
          {
            title: '最新位置',
            dataIndex: 'latestLocation',
            // width: 200
          },
          {
            title: '最新位置时间',
            dataIndex: 'latestLocationTime',
            align: 'center'
          }
        ],
        columns: [{
            title: '受害人手机号',
            dataIndex: 'victimPhone',
            align: 'center',
            width: 160
          },
          {
            title: '预警等级',
            dataIndex: 'warningLevel',
            align: 'center',
            width: 100
          },
          {
            title: '诈骗类型',
            dataIndex: 'fraudType',
            align: 'center',
            width: 140
          },
          {
            title: '预警时间',
            width: 120,
            dataIndex: 'warningTime',
            align: 'center'
          },
          {
            title: '涉诈域名',
            dataIndex: 'accessDomainName',
            // width: 120,
          },
          {
            title: '最新位置',
            dataIndex: 'latestLocation',
            // width: 200
          },
          {
            title: '最新位置时间',
            width: 120,
            dataIndex: 'latestLocationTime',
            align: 'center'
          }
        ]
      }
    },
    methods: {
      
      _replaceSpace(str) {
        return str.replace(' ', '\n')
      },
      _moreClick() {
        this.$emit('more-click')
        this.showMore = true
      },
      moreChange(pagination, filters, sorter, {
        currentDataSource
      }) {
        this.$emit('more-change', pagination.current)
        
      }
    }
  }
</script>

<style lang="less" scoped>
  *{
    opacity: unset!important;
  }
  @font-face {
    font-family: 'pang';
    src: url(../../font/PangMenZhengDaoBiaoTiTi-1.ttf);
  }
  @keyframes lineMove{
     0%{width: 0;}
     100%{width: 90%;}
  }
  @keyframes dot{
     0%{left: 0;}
     100%{left: 2%;}
  }
  
  .close{
    animation: unset!important;
    height: unset!important;
  }

  #container {
    width: 100%;
    height: 27.4vh;
    display: flex;
    flex-flow: column;
    color: #fff;
    background-color: rgba(7, 38, 46, .2);
    border: 1px solid rgba(194, 215, 253, .2);
    padding: 0 21px 0 23px;
    position: relative;
    .loading{
      font-size: 40px;
      position: absolute;
      bottom: 50%;
      left: calc(50% - 20px);
    }
    
    
    
    
    
    font-family: "microsoft yahei";
    ::v-deep .ant-spin-blur{
      opacity: unset;
      &::after{
        background: transparent;
        opacity: unset;
      }
    }

    ::v-deep .ant-table-content {
      height: 100%;
      display: flex;
      flex-flow: column;
      
      .ant-table-placeholder {
        // height: 100%;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;

      }
    }

    .title {
      font-family: pang;
      width: 100%;
      height: 2.87vh;
      margin: 0 auto;
      margin-top: 1.296vh;
      color: #00AEFF;
      // background-image: url(image/title.png);
      background-size: 100% 100%;
      position: relative;
      .dot{
        width: 10px;
        height: 10px;
        position: absolute;
        left: 2%;
        top: -3px;
        animation: 2s dot 0s linear;
      }
      >img{
        width: 100%;
        height: 2.407vh;
        animation: 4s lineMove 0s linear;
      }
      // display: flex;
      // justify-content: space-between;
      .more {
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        margin-top: -3px;
        font-size: 1.481vh;
        display: flex;
        align-items: center;

        img {
          margin-left: 10px;
          margin-top: -5px;
          height: 1.0185vh;
        }
      }

      span {
        position: absolute;
        left: 50px;
        top: -1.0185vh;
        font-size: 1.852vh;
      }
    }

    .table {
      width: 100%;
      flex: 1;
      ::v-deep .ant-spin-container {
        height: 100%;
      
        .ant-table {
          height: 100%;
        }
      }

      ::v-deep .ant-spin-nested-loading {
        height: 100%;

        
      }

      ::v-deep .ant-table-placeholder {
        background-color: transparent;
        border-bottom: 0;
      }

      ::v-deep .ant-empty-description {
        color: #fff;
      }

      ::v-deep .ant-table-thead {
        th {
          padding: 0 10px;
          font-size: 1.296vh;
          height: 4.63vh;
          color: #00AEFF;
          white-space: nowrap;
          background-color: transparent;
          border-bottom: 0;
        }
      }

      ::v-deep .ant-table-tbody {
        .ant-table-row {
          &:nth-of-type(odd) {
            background-color: rgba(39, 104, 136, .2);
          }
        }

        td {
          height: 5.5555vh;
          background-color: transparent;
          border-bottom: 0;
          color: #fff;
          padding: 0 10px;
          font-size: 1.296vh;

        }
      }
    }

    .more-bg {
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999999999;
      background-color: rgba(0, 0, 0, .8);
      
      .more-loading{
        font-size: 40px;
        position: absolute;
        bottom: 50%;
        left: calc(50% - 20px);
      }

      .more-table {
        display: flex;
        flex-flow: column;
        width: 138.7969vh;
        min-width: 1000px;
        height: 65.0925%;
        min-height: 455px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        margin-top: 100px;
        background-image: url(./image/more-bg.png);
        background-size: 100% 100%;
        padding: 6vh 6.4vw 9vh 6.4vw;

        .title {
          background-image: unset;
          height: auto;
          font-family: pang;
          font-size: 3.3333vh;
          margin-top: -2.1296vh;
          margin-bottom: 3.2407vh;
          display: flex;
          flex-flow: column;
          align-items: center;
          position: relative;

          .close {
            width: 32px;
            position: absolute;
            right: -0.5vw;
            top: -2vh;
            cursor: pointer;
          }

          img {
            width: 512px;
            margin-top: 2px;
          }
        }

        .total {
          color: #fff;
          margin-bottom: 1.75925vh;
          font-size: 1.296vh;
          span {
            margin-left: 20px;
          }

          i {
            font-style: normal;
            color: #FFCC00;
          }
        }

        .table {
          flex: 1;
          
          ::v-deep .ant-table-thead {
            th {
              padding: 0 10px;
              font-size: 1.296vh;
              height: 4.48vh;
              color: #00AEFF;
              white-space: nowrap;
              background-color: transparent;
              border-bottom: 0;
            }
          }
          
          ::v-deep .ant-table-tbody {
            .ant-table-row {
              &:nth-of-type(odd) {
                background-color: rgba(39, 104, 136, .2);
              }
            }
          
            td {
              height: 5vh;
              background-color: transparent;
              border-bottom: 0;
              color: #fff;
              padding: 0 10px;
              font-size: 1.296vh;
              
            }
          }

          ::v-deep .ant-spin-nested-loading {
            height: 100%;
          }

          ::v-deep .ant-spin-container {
            height: 100%;
            display: flex;
            flex-flow: column;
            position: relative;

            .ant-table {
              flex: 1;

              .ant-empty {
                min-height: 400px;
                line-height: 400px;
              }
            }

            .ant-pagination {
              position: absolute;
              right: 0;
              bottom: 1.4814vh;
              display: flex;
              justify-content: flex-end;
              margin: 0 0.148vh;
              .ant-pagination-jump-next, .ant-pagination-jump-prev{
                width: 32px;
                min-width: unset;
                    display: flex;
                    flex-wrap: nowrap;
                    .ant-pagination-item-link{
                      border: 0;
                      margin: 0;
                      width: auto;
                    }
                    .ant-pagination-item-ellipsis{
                      width: 32px;
                      color: #fff;
                      border: 0;
                    }
              }

              .ant-pagination-total-text,
              .ant-pagination-item-link {
                color: #0DE8FB;
              }

              .ant-pagination-item-link {
                border: 1px solid #0DE8FB;
                margin: 0 10px;
                width: 2.222vh;
                height: 2.222vh;
                line-height: 2.222vh;
                border-radius: 0;
                // margin: 0 10px;
              }
              .ant-pagination-total-text{
                height: 2.222vh;
                line-height: 2.222vh;
                font-size: 1.29629vh;
              }

              .ant-pagination-item {
                border-radius: 0;
                width: 2.222vh;
                height: 2.222vh;
                line-height: 2.222vh;
                border: 1px solid #0DE8FB;
                background-color: transparent;

                a {
                  padding: 0;
                  color: #00BEFF;
                }
              }

              .ant-pagination-item-active {
                background-color: #00BEFF;
                border-color: #00BEFF;

                a {
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
